<script setup>
import { reactive, onBeforeMount, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { GetTableList } from '@/api/info'
import { getDate } from '@/utils/redrun'
import { Status } from '@/api/info'
import { Delete } from '@/api/info'
import { useCategoryHook } from '@/hook/infoHook'
const { infoData, handleGetCategory } = useCategoryHook()
const { proxy } = getCurrentInstance()
const $router = useRouter()
const data = reactive({
  total: 0,
  category: 0,
  category_options: [
    { label: '人工智能', value: 0 },
    { label: '技术', value: 1 }
  ],
  cascader_props: {
    label: 'category_name',
    value: 'id'
  },
  tableData: [],
  row_data_id: '',
  keyword_options: [
    {
      label: 'ID',
      value: 'id'
    },
    {
      label: '标题',
      value: 'title'
    }
  ]
})
const request_data = reactive({
  pageNumber: 1, // 当前页码
  pageSize: 10, // 每页请求数量
  category_id: [],
  key: '',
  keyword: ''
})
const handleSelectionChange = (val) => {
  // console.log(val)
  if (val && val.length > 0) {
    const idItem = val.map((item) => item.id)
    data.row_data_id = idItem.join()
  } else {
    data.row_data_id = ''
  }
  // console.log(data.row_data_id)
}
const handleSizeChange = (val) => {
  request_data.pageSize = val
  request_data.pageNumber = 1
  handleGetList()
}
const handleCurrentChange = (val) => {
  request_data.pageNumber
  handleGetList()
}
// const toLink = ()=>{
//   let id = 100;
//   let name = "zhangdsn"
//   sessionStorage.setItem("id",id);
//   sessionStorage.setItem("name",name)
//   $router.push({
//     path: '/newsDetailed',
//     query:{
//       id,
//       name
//     }
//   })
// }
const handleDetailed = (id) => {
  $router.push({
    path: '/newsDetailed',
    query: {
      id
    }
  })
}
const handleGetList = async () => {
  const request_data = formatParams()
  console.log(request_data)
  let res = await GetTableList(request_data)
  data.tableData = res.data.data
  data.total = res.data.total
}
const formatParams = () => {
  const data = Object.assign({}, request_data)
  // console.log(data)
  if (data.category_id.length) {
    data.category_id = data.category_id[data.category_id.length - 1]
  } else {
    delete data.category_id
  }
  if (data.key && data.keyword) {
    data[data.key] = data.keyword
  }
  delete data.key
  delete data.keyword
  return data
}
const formatDate = (row) => {
  return getDate({ value: row.createDate * 1000 })
}
const handleChangeStatus = async (value, data) => {
  data.loading = true
  data.status = !data.status
  try {
    let res = await Status({ id: data.id, status: value })
    proxy.$message(res.message)
    data.status = value
    data.loading = false
  } catch (error) {
    data.loading = false
  }
}
const handleDelete = async (value) => {
  let res = await Delete({ id: value })
  proxy.$message.success(res.message)
  handleGetList()
  data.row_data_id = []
}
const handleDeleteConfirm = (value) => {
  proxy.deleteConfirm({
    title: '删除',
    message: '确认删除当前数据吗？',
    thenFunc: () => {
      return handleDelete(value)
    }
  })
}
onBeforeMount(() => {
  handleGetList()
  handleGetCategory()
})
</script>
<template>
  <el-row>
    <el-col :span="18">
      <el-form :inline="true" label-width="80px">
        <el-form-item label="类别">
          <el-cascader
            v-model="request_data.category_id"
            :options="infoData.category_options"
            :props="data.cascader_props"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="关键字">
          <el-select placeholder="请选择" v-model="request_data.key" class="width-100">
            <el-option
              v-for="item in data.keyword_options"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="request_data.keyword" placeholder="请输入关键字" class="width-180" />
        </el-form-item>
        <el-form-item>
          <el-button class="danger" @click="handleGetList">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="6">
      <RouterLink to="/newsDetailed" class="pull-right">
        <el-button type="danger">新增</el-button>
      </RouterLink>
    </el-col>
  </el-row>
  <el-table
    ref="table"
    border
    :data="data.tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="40"></el-table-column>
    <el-table-column prop="title" label="标题" width="200"></el-table-column>
    <el-table-column prop="category_name" label="类别"></el-table-column>
    <el-table-column prop="createDate" :formatter="formatDate" label="日期"></el-table-column>
    <el-table-column prop="status" label="发布状态">
      <template #default="scope">
        <el-switch
          v-model="scope.row.status"
          @change="handleChangeStatus($event, scope.row)"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="operation" label="操作">
      <template #default="scope">
        <el-button type="danger" size="small" @click="handleDetailed(scope.row.id)">编辑</el-button>
        <el-button size="small" @click="handleDeleteConfirm(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row class="margin-top-30">
    <el-col :span="6">
      <el-button :disabled="!data.row_data_id" @click="handleDeleteConfirm(data.row_data_id)"
        >批量删除</el-button
      >
    </el-col>
    <el-col :span="18">
      <el-pagination
        class="pull-right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="request_data.pageNumber"
        :page-size="10"
        :page-sizes="[10, 20, 50, 100]"
        layout="total,sizes,prev,pager,next,jumper"
        :total="data.total"
      >
      </el-pagination>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
.width-160 {
  width: 160px;
}
.width-100 {
  width: 100px;
}
.width-180 {
  width: 180px;
}
</style>
